@import '@/lib/reset.scss';

.Seek{
    .SeekInput{
        @include rect(100%, 247px);
        background: url(//y.gtimg.cn/mediastyle/yqq/img/bg_search.jpg);
        background-position: -100px 0;
        padding-top: 1px;
        .SeekVessel{
            @include rect(639px, 50px);
            @include background-color(#fff);
            border-radius: 5px;
            margin: 100px auto;
            padding-left: 15px;
            input{
                @include rect(554px, 50px);
                @include font-size(14px);
                border: 0;
                margin-right: 40px
            }
            button{
                @include rect(20px, 20px);
                @include font-size(20px);
                cursor: pointer;
                border: 0;
                background: 0;
            }
        }
    }
    .CutVessel{
        @include rect(100%, 57px);
        @include background-color(#FAFAFA);
        .SeekCutList{
            @include rect(1200px, 57px);
            margin: 0 auto;
            border-bottom: 1px solid #f7f7f7;
            li{
                float: left;
                margin-right: 55px;
                p{
                    @include text-color(#000);
                    @include line-height(57px);
                    @include font-size(16px);
                    cursor: pointer;
                    &:hover{
                        @include text-color(#31c27c);
                    }
                }
                .activep{
                    @include text-color(#31c27c);
                }
            }
            // .active{
            //     @include text-color(#31c27c);
            // }
        }
    }
}

.SeekList{
    @include background-color(#FAFAFA);
    min-height: 500px;
    padding-top: 30px;
    ul{
        width: 1200px;
        @include margin(0 auto);
        li{
            @include rect(100%, 50px);
            position: relative;
            @include text-color(#000);
            p{
                position: absolute;
                left: 20px;
                @include line-height(50px);
            }
            b{
                position: absolute;
                left: 545px;
                @include line-height(50px);
                @include font-weight(100);
                @include text-color(#31c27c);
            }
            span{
                position: absolute;
                left: 816px;
                @include line-height(50px);
                img{
                    @include rect(45px, 45px);
                    border-radius: 50%;
                }
            }
            em{
                position: absolute;
                left: 1088px;
                font-style: normal;
                @include line-height(50px);
            }
        }
        li:nth-child(odd){
            @include background-color(#FBFBFD);
        }
        li:nth-child(1){
            @include text-color(#999);
            b{
                @include text-color(#999);
            }
        }
    }
}

.AlbumList{
    @include background-color(#FAFAFA);
    min-height: 500px;
    padding-top: 30px;
    display: none;
    ul{
        width: 1200px;
        @include margin(0 auto);
        li{
            @include rect(100%, 70px);
            position: relative;
            @include text-color(#000);
            p{
                position: absolute;
                left: 20px;
                @include line-height(70px);
                img{
                    @include rect(45px, 45px);
                    margin-right: 16px;
                }
            }
            span{
                position: absolute;
                left: 722px;
                @include line-height(70px);
                @include text-color(#31c27c);
            }
            b{
                position: absolute;
                left: 1110px;
                @include line-height(70px);
                @include font-weight(100);
                @include text-color(#999);
            }
        }
        li:nth-child(odd){
            @include background-color(#FBFBFD);
        }
        li:nth-child(1){
            @include text-color(#999);
            @include rect(100%, 50px);
            p{
                @include line-height(50px);
            }
            span{
                @include line-height(50px);
                @include text-color(#999);
            }
            b{
                @include line-height(50px);
            }
        }
    }
}

.ListList{
    @include background-color(#FAFAFA);
    min-height: 500px;
    padding-top: 30px;
    display: none;
    ul{
        width: 1200px;
        @include margin(0 auto);
        li{
            @include rect(100%, 70px);
            position: relative;
            @include text-color(#000);
            p{
                position: absolute;
                left: 20px;
                @include line-height(70px);
                cursor: pointer;
                &:hover{
                    @include text-color(#31c27c);
                }
                img{
                    @include rect(45px, 45px);
                    margin-right: 16px;
                }
            }
            span{
                position: absolute;
                left: 722px;
                @include line-height(70px);
                @include text-color(#31c27c);
            }
            b{
                position: absolute;
                left: 1110px;
                @include line-height(70px);
                @include font-weight(100);
                @include text-color(#999);
            }
        }
        li:nth-child(odd){
            @include background-color(#FBFBFD);
        }
        li:nth-child(1){
            @include text-color(#999);
            @include rect(100%, 50px);
            p{
                @include line-height(50px);
            }
            span{
                @include line-height(50px);
                @include text-color(#999);
            }
            b{
                @include line-height(50px);
            }
        }
    }
}

.UserList{
    @include background-color(#FAFAFA);
    min-height: 500px;
    padding-top: 30px;
    display: none;
    ul{
        width: 1200px;
        @include margin(0 auto);
        li{
            @include rect(100%, 80px);
            position: relative;
            @include text-color(#000);
            p{
                position: absolute;
                left: 20px;
                @include line-height(70px);
                img{
                    @include rect(60px, 60px);
                    border-radius: 50%;
                    margin-right: 22px;
                }
            }
            span{
                position: absolute;
                left: 502px;
                @include line-height(70px);
                @include text-color(#31c27c);
            }
            b{
                position: absolute;
                left: 760px;
                @include line-height(70px);
                @include font-weight(100);
                @include text-color(#999);
            }
            button{
                position: absolute;
                left: 1008px;
                top: 22px;
                @include rect(122px, 38px);
                border: 1px solid #c9c9c9;
                border-radius: 2px;
                @include background-color(#fff);
            }
        }
    }
    li:nth-child(odd){
        @include background-color(#FBFBFD);
    }
    img{
        height: 50px;
        width: 50px;
    }
}

.LrcList{
    @include background-color(#FAFAFA);
    min-height: 500px;
    padding-top: 1px;
    display: none;
    img{
        height: 50px;
        width: 50px;
    }
}